<template>
  <page-frame>
    <div class="check03-in-main" style="vertical-align: top">
      <div class="toptitle">
        <div class="left">会员入住 - 入住审核</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="next">下一步</el-button>
            <el-button @click="back">返&nbsp回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="step-show" @click="showStep">
        <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
        <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
        {{show}}
      </div>
      <div class="stepbar" v-show="isShowStep">
        <stepCheckIn :stepData="currentView"
                     :currentMemberObj = "currentMemberObj"
        ></stepCheckIn>
      </div>


      <div class="check-in-centre">
        <div class="panel plan">
          <div class="panel-title">会员入住 - 审核详情</div>
          <div class="panel-content plan-meal">
            <div class="memberInfo">
              <el-row>
                <el-col :span="8"><div class="lInfro">会员姓名:<span>{{currentMemberObj.memberName}}</span></div></el-col>
                <el-col :span="8"><div class="lInfro">会员编号:<span>{{currentMemberObj.memberNo}}</span></div></el-col>
              </el-row>
            </div>
            <el-table
              :data="informationExpenseItem"
              border
              style="width: 100%;margin-bottom:20px;">
              <el-table-column
                prop="itemName"
                label="费用项目"
                width="">
              </el-table-column>
              <el-table-column
                prop="price"
                label="费用标准（元/月）">
              </el-table-column>
              <el-table-column
                prop="paidAmount"
                label="付款（元）">
              </el-table-column>
              <el-table-column
                prop="remarks"
                label="备注">
              </el-table-column>
            </el-table>
            <div class="info">
              <el-row>
                <el-col :span="4"><div class="lInfro">应付总金额:<span>{{informationBill.receivable}}</span></div></el-col>
                <el-col :span="4"><div class="lInfro">缴费状况:<span>{{informationBill.status}}</span></div></el-col>
                <el-col :span="4"><div class="lInfro">财务人员:<span>{{informationBill.emName}}</span></div></el-col>
                <el-col :span="6"><div class="lInfro">收款时间:<span>{{informationBill.receTime}}</span></div></el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div class="panel plan">
          <div class="panel-title">会员入住 - 审核结果</div>
          <div class="panel-content plan-meal">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span style="line-height: 36px;">审核进度</span>
              </div>
              <div v-for="data in approvalTableData">
                <el-row>
                  <el-col style="padding-left:10px;margin:10px 0;">{{data.sortName}}</el-col>
                </el-row>
                <el-row class="member-process-approval-item">
                  <el-col :span="6">
                    <span>申请时间:</span>
                    <span v-model="data.applicationTime">{{data.applicationTime}}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>审核时间:</span>
                    <span v-model="data.approvalTime">{{data.approvalTime}}</span>
                  </el-col>
                  <el-col :span="4">
                    <span>审核人:</span>
                    <span v-model="data.approverName">{{data.approverName}}</span>
                  </el-col>
                  <el-col :span="2">
                    <span v-model="data.approvalWayName">{{data.approvalWayName}}</span>
                  </el-col>
                  <el-col :span="5">
                    <span>审核结果:</span>
                    <span v-model="data.result">{{data.result}}</span>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>


<script>
  import stepCheckIn from '../../components/stepbar/checkIn.vue';
  import financeActApi from '../../service/finance/financeActApi';
  import commonApi from '../../service/member/commonApi';
  import commonJs from '../../config/common';
  export default {
    methods: {
      init(){
        this.currentMemberObj = this.$route.params.memberObj;
        if(typeof this.currentMemberObj  == "object"){
          this.informationAudit();
          this.getCheckInApprovalResult();
        }else{
          this.$router.push({name: 'memberCheckIn'});
        }
      },
      /**
       * 获取退住审核详情
       */
      informationAudit(){
        let self = this;
        financeActApi.getAccountBillByAct(self.currentMemberObj.memberId,self.currentMemberObj.actId).then(function (response) {
          self.informationExpenseItem = response.data.data.accountExpenseItemDTOList ;
          self.informationBill = response.data.data.accountBillDTO ;
          //备注
          for(let i=0;i<self.informationExpenseItem.length;i++){
            if(self.informationExpenseItem[i].typeName=='押金'){
              self.informationExpenseItem[i].remarks = '';
            }else{
              self.informationExpenseItem[i].remarks = commonJs.formateDateToTime(self.informationExpenseItem[i].changeDate)
                +'-'+commonJs.formateDateToTime(self.informationExpenseItem[i].dueDate)
                +'('+self.informationExpenseItem[i].typeName+')';
            }
          }
          if(self.informationBill.status==1){
            self.informationBill.status="已缴费";
          }else{
            self.informationBill.status="未缴费";
          }
        })
      },
      /**
       * 获取会员入住审核结果
       */
      getCheckInApprovalResult(){
        let self = this;
        commonApi.getApprovalResult(self.currentMemberObj.actId).then(
          (response)=>{
            self.approvalTableData = response.data.data ;
          }
        );
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },
      /**
       * 下一步
       */
      next(){
        let self = this;
        commonApi.getFlowRouter("inApply",self.currentMemberObj.actId,"").then(
          (response)=>{
              if(response.data.status!=200){
              this.$message({
                type: 'error',
                message: response.data.data.message
              });
          }else{
             this.$router.push({name:"checkInProcess04",params:{memberObj:this.currentMemberObj}});
          }
         }
        );
      },
      back(){
        this.$router.push({name: 'memberCheckIn'});
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        currentView:"audit",
        currentMemberObj:{},
        approvalTableData:[],
        informationExpenseItem:[],
        informationBill:{
          "accountId": 0,
          "actId": 0,
          "billId": 0,
          "billType": 0,
          "createTime": "",
          "createUser": "",
          "deleted": 0,
          "emId": 0,
          "enName":"",
          "genTime": "",
          "payTime": "",
          "payTransfer": 0,
          "payWx": 0,
          "receTime": "",
          "receivable": 0,
          "status": 0,
          "transId": 0,
          "type": 0,
        },
        isShowStep:false,
        show:"显示流程图",
      }
    },
    components: {
      stepCheckIn
    }
  }
</script>
<style>
  .check03-in-main .text {
    font-size: 14px;
    background-color: #F5FBFF;
    border-bottom: 1px solid #ffffff;
    position: relative;
  }

  .check03-in-main .item {
    padding: 15px 20px;
  }
  .check03-in-main .item span:first-child{
    /*margin-right: 5px;*/
  }
  .check03-in-main .item span:nth-child(2){
    margin-right: 50px;
    margin-left:5px;
  }
  .check03-in-main .item span:nth-child(3){
    padding-left: 10px;
    border-left: 1px solid #8c939d;
    margin-right: 150px;
  }

  .check03-in-main .item span.btns{
    position: absolute;
    top:11px;
    right: 20px;
  }

  .check03-in-main .clearfix:before,
  .check03-in-main .clearfix:after {
    display: table;
    content: "";
  }
  .check03-in-main .clearfix:after {
    clear: both
  }
  .check03-in-main .el-card__header{
    padding: 3px 20px;
  }
  .check03-in-main .stepbar{
    margin-top: 66px;
  }
  .check03-in-main .lInfro span{
    margin-left: 5px;
  }
  .el-tabs__item{
    font-weight: bolder;
    font-size:16px;
  }
  .el-form{

  }

  .el-col-12{
    position: relative;
  }
  .check03-in-main .btns{
    float: right;
  }

  .el-input{
    width: 80%;
  }
  .input input{
    display: inline-block;
  }
  .el-icon-caret-top:before {
    content: "\E607"!important;
  }
  .el-select {
    display: block;
    position: relative;
  }
  .el-select .el-input .el-input__icon {
    top: 50%!important;
  }
  .check-in-centre .bar:not(:first-child){

    margin-top: 50px;
  }
  .check-in-centre .bar{
    margin-bottom:18px;
  }
  .check-in-centre .review .el-row{
    height:36px;
    line-height:36px;
    width:100%;
    background-color:#eef1f6;
    margin-bottom:5px;
  }
  .check-in-centre .review .reviewItem .step{
    margin-bottom: 8px;
    font-size: 13px;
    color: #a8a8b0;
  }
  .check-in-centre .memberInfo{
    margin-bottom: 10px;
  }
  .check-in-centre .info{
    margin-top: -10px;
  }
  .check-in-centre .lInfro{
    font-size: 13px;
  }
  .check-in-centre .el-table{
    width: 90%!important;
  }
</style>
